<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>插件管理</title>
		<script type="text/javascript" src="/script/mootools.js"></script>
		<script type="text/javascript" src="/script/mootools-more.js"></script>
		<link rel="stylesheet" type="text/css" href="/script/jspxnet-ui.css" />
		<script type="text/javascript" src="/script/jspxnet.js"></script>
		<script type="text/javascript" src="/script/jspxnet-ui-roc.js"></script>
		<link href="/share/mskin/default/devcenter.css" rel="stylesheet" type="text/css" />
		<script src="/script/vue.js"></script>
		<style>
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>

		<template id="operatePlugTemplate">
			<div class="con shortText">
				<label class="tit" for="sortType">顺序
					<input name="sortType" type="text" v-model:value="self.sortType" />
				</label>

				<label class="tit" for="refName">IOC名称
					<input name="refName" type="text" v-model:value="self.refName" />
				</label>

				<label class="tit" for="namespace">命名空间
					<input name="namespace" type="text" v-model:value="self.namespace" />
				</label>
				
				<label class="tit" for="desc">说明
					<input name="desc" type="text" v-model:value="self.desc" />
				</label>

				<div class="tit">
					<span class="jDefButton">
						<i class="jIcoDelete" @click="deleteOperatePlugLine" v-bind:refId="self.refName"></i>
					</span>
				</div>
			</div>
		</template>


		<div class="formContainer mWrap">
			<div class="mTitPanel addBoardLogo">
				插件管理
			</div>
			<div class="addConPanel mConPanel">
				<form id="operatePlugForm" v-cloak>
					<div class="row">
						<label class="tit" for="helpTip">说明</label>
						<div class="con">
							插件继承com.github.jspxnet.txweb.table.meta.AbstractBillPlug,<br />
							开发好后放入ioc能够载入的目录下.<br />
							拦截Operate 接口动作,提供二次开发.
						</div>
					</div>

					<div class="row">
						<label class="tit" for="name">名称</label>
						<div class="con">
							{{ soberTable.name }}
						</div>
					</div>
					<div class="row">
						<label class="tit" for="caption">描述名称</label>
						<div class="con">
							{{ soberTable.caption }}
						</div>
					</div>

					<div class="row w1column">
						<label class="tit">插件
							<span class="jDefButton" v-on:click="addPlugLine"><i class="jIcoAdd"></i></span>
						</label>

						<div id="operatePlugPanel" class="row w1column">
							<operateplug v-for="(item,index) in operatePlugList" v-bind:self="item"></operateplug>
						</div>
					</div>


					<div class="buttonPanel">
						<span id="submitBtn" name="method" value="save" type="button" v-on:click="save"
							class="jDefButton"><i class="jIcoSave"></i>确定</span>
					</div>
				</form>
			</div>
		</div>
		<script>
			Vue.prototype.$log = console.log;
			Vue.prototype.$debuger = function() {
				debugger;
			};
			var className = getUrlParam("className");
			 
			var app = false;
			window.addEvent('domready', function() {
				
				app = new Vue({
					el: '#operatePlugForm',
					data: function() {
						return {
							"soberTable": {
								"databaseName": "",
								"name": "",
								"caption": "",
								"create": true,
								"useCache": true,
								"primary": "id",
								"autoId": true,
								"idType": "uuid",
								"nexusMap": {}
							},
							"operatePlugList": []
						};
					},
					components: {
						operateplug: {
							props: ['item', 'self'],
							template: "#operatePlugTemplate",
							methods: {
								deleteOperatePlugLine: function(event) {
									var refid = event.target.getAttribute('refid');
									app.operatePlugList.forEach(function(item, index, arr) {
										if (item.refName == refid) {
											app.operatePlugList.splice(index, 1); //满足条件 根据下标删除该元素
										}
									});
									app.$forceUpdate();
								}
							}
						}
					},
					methods: {
						loadData: function() {
							var that = this;
							var posts = {
								"className": className
							};
							new Request.ROC({
								'url': '/devcenter/operate/plug/detail.jwc',
								'data': posts,
								onSuccess: function(obj) {
									if (obj.success) {
										Object.assign(that.$data, obj.data);
										app._data = obj.data;
										that.$forceUpdate();
									}
								}
							}).send();
						},
						addPlugLine: function() {
							var el = {
								"sortType": "",
								"tableName": "",
								"refName": "",
								"namespace": "",
								"desc": ""
							};
							app.operatePlugList.push(el);
							app.$forceUpdate();
						},
						selectPlatformType() {
							app._data.platformType = event.target.value;
						},
						selectControlType() {
							app._data.controlType = event.target.value;
						},
						save: function() {
							var posts = app._data;
							posts.tableName = app.soberTable.name;
							posts.operatePlugList = app.operatePlugList;
							
							console.log(posts);
							//添加接口
							var url = '/devcenter/operate/plug/save.jwc';
							new Request.ROC({
								'url': url,
								data: posts,
								onSuccess: function(obj) {
									if (obj.success == 1) {
										app._data = obj.data;
										new JDialog.Pop({
											title: '提示信息',
											message: obj.message
										}).show();
									} else {
										new JDialog.Alert({
											title: '提示信息',
											message: obj.message
										}).show();
									}
								}
							}).post();
						},
						log(msg) {
							console.log(msg)
						}
					},
					mounted: function() {
						this.loadData();
					}
				});
			});
		</script>
	</body>

</html>
